<template>
  <div class="slot">
      <!-- <slot>备用内容</slot> -->
    <!-- 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。 -->
    <!-- 有时为一个插槽指定备用 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染，但是如果我们提供内容，则这个提供的内容将会被渲染从而取代备用内容： -->
    <!-- 具名插槽:<slot> 元素有一个特殊的 attribute：name。通过它可以为不同的插槽分配独立的 ID，也就能够以此来决定内容应该渲染到什么地方：
      一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
        在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称： -->
    <!-- <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer> -->
    <!-- 作用域插槽:让插槽内容能够访问子组件中才有的数据
    可以根据自己的需要将任意数量的 attribute 绑定到 slot 上：
    在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：-->
    <ul>
      <li v-for="(item,index) in items" :key="index">
       <slot :item="item" :index="index"></slot>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Vue, Options, Prop } from 'vue-property-decorator';
@Options({ components: {} })
export default class VueSlot extends Vue {
  public info= '子组件内容';
  public items = ['Feed a cat', 'Buy milk'];

  public created() {
    console.log('$attrs', this.$attrs);
  }
}
</script>

<style lang="postcss">
.slot{
  width: 500px;
  height: 500px;
  background-color: grey;
}
</style>
